<template>
    <view class="">
        <!-- Header -->
        <view class="header bg-white">
            <u-search placeholder="请输入商品名称" :show-action="false" @change="change(current)" v-model="keyword"></u-search>
        </view>

        <!-- Nav -->
        <view class="nav bg-white">
            <u-tabs name="name" :show-bar="false" :list="list" :is-scroll="true" :current="current" @change="change"
                active-color="#40AFFA" />
        </view>
        <!-- Section -->
        <view class="section" :style="{'height': height}">
            <swiper :duration="400" style="height: 100%; overflow: hidden;" @change="change" :current="current">
                <swiper-item v-for="(items, index) in list" :key="index">
                    <view v-show="index == current">
                        <mescroll-uni bottom="220rpx" ref="mescrollRef" top="0rpx" height="100%" @init="mescrollInit"
                            @up="upCallback" :up="upOption" @down="downCallback">
                            <view class="title muted sm">
                                共{{count}}笔订单
                            </view>

                            <block v-for="(items2, index2) in items.lists" :key="index2">
                                <order-card :data="items2">
                                    
                                    <template v-if="items2.edit_address_btn">
                                        <router-link :to="'/pages/address_edit/address_edit?id='+items2.id">
                                            <button class="btn hollow br60 flex row-center normal">修改地址</button>
                                        </router-link>
                                    </template>
                                    <template v-if="items2.content_btn">
                                        <router-link :to="'/pages/order_detail/order_detail?id='+items2.id">
                                            <button class="btn solid br60 flex row-center normal">查看内容</button>
                                        </router-link>
                                    </template>
                                    <template v-if="items2.shop_cancel_btn">
                                        <button class="btn hollow br60 flex row-center normal"
                                            @click="openFunc(items2, 'close')">取消订单</button>
                                    </template>
                                    <template v-if="items2.to_ship_btn">
                                        <router-link :to="'/bundle/pages/deliver_goods/deliver_goods?id='+items2.id">
                                            <button class="btn solid br60 flex row-center normal">去发货</button>
                                        </router-link>
                                    </template>
                                    <template v-if="items2.take_btn">
                                        <button class="btn solid br60 flex row-center normal"
                                            @click="openFunc(items2, 'confirm')">确认收货</button>
                                    </template>
                                    <template v-if="items2.delivery_btn">
                                        <button class="btn hollow br60 flex row-center normal"
                                            @click="openFunc(items2, 'recycle')">查看物流</button>
                                    </template>
                                    <template v-if="items2.del_btn">
                                        <button class="btn hollow br60 flex row-center normal"
                                            @click="openFunc(items2, 'del')">删除</button>
                                    </template>
									<template v-if="items2.to_verification_btn">
									    <router-link :to="'/pages/verification_order/verification_order'">
									        <button class="btn solid br60 flex row-center normal">去核销</button>
									    </router-link>
									</template>
                                </order-card>
                            </block>

                        </mescroll-uni>
                    </view>
                </swiper-item>
            </swiper>
        </view>

        <modal height="200rpx" v-model="close" @confirm="orderSetting">
            <view class="black n" style="height: 200rpx;">
                确认取消该订单吗?
            </view>
        </modal>

        <modal height="200rpx" v-model="del" @confirm="orderSetting">
            <view class="black nr" style="height: 200rpx;">
                确认删除该订单吗?
            </view>
        </modal>

        <modal height="200rpx" v-model="confirm" @confirm="orderSetting">
            <view class="black nr" style="height: 200rpx;">
                确认用户已收到货？请谨慎处理！
            </view>
        </modal>
        
        <modal height="200rpx" :cancelShow="false" v-model="recycle">
            <view class="black nr" style="height: 200rpx;">
                <view class="m-t-40">快递公司： {{logistics.shipping_name}}</view>
                <view class="m-t-20">快递公司： {{logistics.invoice_no}} <text class="copy" @click="copy(logistics.invoice_no)">复制</text></view>
            </view>
        </modal>

        <u-toast ref="uToast" />
    </view>
</template>


<script>
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
    import {
        apiOrderList,
        apiOrderClose,
        apiOrderConfirm,
        apiOrderLogistics,
        apiOrderDelete
    } from '@/api/order'
    import {
        debounce,
        copy
    } from "@/utils/tools.js"
    export default {
        mixins: [MescrollMixin],
        data() {
            return {
                height: '100%',
                
                keyword: '',
                list: [{
                        name: '全部',
                        type: 'all',
                        lists: []
                    },
                    {
                        name: '待付款',
                        type: 'pay',
                        lists: []
                    },
                    {
                        name: '待发货',
                        type: 'delivery',
                        lists: []
                    },
                    {
                        name: '待收货',
                        type: 'receiving',
                        lists: []
                    },
                    {
                        name: '已完成',
                        type: 'finish',
                        lists: []
                    },
                    {
                        name: '已取消',
                        type: 'close',
                        lists: []
                    }
                ],                
                current: 0,
                count: 0,

                action: '',

                close: false,
                del: false,
                confirm: false,
                recycle: false,
                
                // 物流
                logistics: {
                    shipping_name: '-',
                    invoice_no: ''
                },
                
                upOption: {
                    empty: {
                        icon: '/static/images/empty/order.png',
                        tip: '暂无相关订单！', // 提示
                        fixed: true,
                        top: "200rpx",
                    }
                }
            }
        },
        
        updated() {
            
        },
        
        methods: {
            change(event) {
                let index;
                event.detail ? index = event.detail.current : index = event
                this.current = Number(index)
                this.$refs.mescrollRef[this.current].mescroll.resetUpScroll()
            },

            upCallback(page) {
                const index = this.current;
                const pageNum = page.num
                const pageSize = page.size

                apiOrderList({
                    goods_name: this.keyword,
                    type: this.list[index].type,
                    page_no: pageNum,
                    page_size: pageSize,
                }).then(({
                    list,
                    size,
                    more,
                    count,
                }) => {
                    // 如果是第一页或是搜索时需手动置空列表
                    if (pageNum == 1 || this.keyword) this.list[index].lists = []
                    const hasNext = !!more;
                    // 重置列表数据
                    this.count = count
                    this.list[index].lists = [...this.list[index].lists, ...list]
                    this.$refs.mescrollRef[index].mescroll.endSuccess(list.length, hasNext);
                }).catch((err) => {
                    console.log(err)
                    this.mescroll.endErr()
                })
            },
            
            copy(content) {
                copy(content)
            },

            async openFunc(item, action) {
                if(action == 'recycle') {
                    const res = await apiOrderLogistics({id: item.id})
                    this.logistics = res;
                }
                
                this.curData = item;
                this.action = action;
                this[action] = true;
            },

            // 操作订单
            async orderSetting() {
                let id = this.curData.id,
                    action = this.action

                if (action == 'close') {
                    await apiOrderClose({id})
                } else if (action == 'del') {
                    await apiOrderDelete({id})
                } else if (action == 'confirm') {
                    await apiOrderConfirm({id})
                }

                this.$refs.mescrollRef[this.current].mescroll.resetUpScroll()
                this.$refs.uToast.show({
                    title: '操作成功',
                    type: 'success'
                })
            }
        },

        onShow() {
            // 使用防抖是为了防止v-show的时候出发多条数据，所以使用防抖触发多次的时候可以只成为触发一次，优化性能请求
            this.upCallback = debounce(this.upCallback, 200, this)
            this.$nextTick(() => {
                this.$refs.mescrollRef[this.current].mescroll.resetUpScroll()
            })
            
            uni.getSystemInfo({
                success: (res) => {
                    this.height = res.windowHeight - 107 + 'px';
                }
            });
        }
    }
</script>


<style lang="scss">
    /*根元素需要有固定的高度*/
    page {
        height: 100%;
        box-sizing: border-box;
        background-color: #f5f6fa;

        .header {
            padding: 20rpx 30rpx;
            box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
            position: relative;
            z-index: 1;

           .u-search {
                background-color: #f5f6fa;
                border-radius: 32rpx;
                padding: 0 20rpx;
                
                .u-search__content {
                    height: 72rpx;
                }
            }
        }

        .nav {
            padding: 20rpx 0;
            box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
            position: relative;
            z-index: 1;

          .u-tabs {
                .u-tabs__wrapper {
                    padding: 0 20rpx;
                }
                
                .u-tabs__wrapper__nav__item {
                    padding: 0 30rpx;
                    height: 80rpx;
                    line-height: 80rpx;
                    font-size: 28rpx;
                    transition: all 0.3s;
                    
                    &.u-tabs__wrapper__nav__item--active {
                        font-weight: bold;
                        transform: scale(1.05);
                    }
                }
            }
        }

        .section {
            overflow: hidden;
            padding: 20rpx;
            
            .title {
                padding: 20rpx;
                color: #666;
                font-size: 26rpx;
                background: #fff;
                border-radius: 12rpx;
                margin-bottom: 20rpx;
                box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
            }

            .btn {
                margin: 20rpx 10rpx;
                width: 180rpx;
                height: 64rpx;
                font-size: 26rpx;
                border-radius: 32rpx;
                transition: all 0.3s;
                
                &:active {
                    transform: scale(0.95);
                }
            }

            .solid {
                color: #fff;
                background: linear-gradient(45deg, #40AFFA, #4B7BEC);
                border: none;
                box-shadow: 0 4rpx 12rpx rgba(64,175,250,0.3);
                
                &:active {
                    background: linear-gradient(45deg, #3A9FE9, #456FD9);
                }
            }

            .hollow {
                color: #666;
                background: #fff;
                border: 1px solid #eee;
                box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
                
                &:active {
                    background: #f5f6fa;
                }
            }
        }
        
        .copy {
            font-size: 24rpx;
            margin-left: 20rpx;
            padding: 6rpx 16rpx;
            border-radius: 24rpx;
            color: #40AFFA;
            background-color: rgba(64,175,250,0.1);
            transition: all 0.3s;
            
            &:active {
                background-color: rgba(64,175,250,0.2);
            }
        }
        
         .mescroll-uni {
            .mescroll-body {
                padding: 0 20rpx;
            }
        }
        
      .order-card {
            background: #fff;
            border-radius: 16rpx;
            margin-bottom: 20rpx;
            padding: 30rpx;
            box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
            transition: all 0.3s;
            
            &:active {
                transform: translateY(2rpx);
                box-shadow: 0 1rpx 6rpx rgba(0,0,0,0.05);
            }
        }
    }
</style>
